<template>
	<view class="MyBox">
		<view class="header_background">

			<view class="header_lucency">
				<view style="margin-bottom: 30rpx; display: flex;">
					<u-avatar :src="head_portrait" size="80"></u-avatar>
					<view style="padding: 20rpx;line-height: 65rpx;">
						<view style="font-size: 45rpx; font-weight: bold;">西瓜 ></view>
						<view style="font-size: 26rpx;color: #516f76;">已加入安心住2天</view>
					</view>
				</view>

				<view
					style="padding: 30rpx; display: flex; justify-content: space-between;border-radius: 20rpx; height: 100rpx; background: linear-gradient(to right,#3f413d,#2e2d2b 90%);">
					<view style="color: #f6e5cd;line-height: 50rpx;">
						<view style="font-size: 32rpx;font-weight: bold;">开通会员，享受更多租房服务</view>
						<view style="font-size: 26rpx;">限时抢购</view>
					</view>
					<view style="height: 100%; display: grid;place-items: center;">
						<button style="border-radius: 35rpx;font-size: 27.5rpx;">立即开通</button>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="list_divider">
				<view class="header_nav">
					<uni-grid :column="3" :square="false" :showBorder="false" :highlight="true" @change="change">
						<uni-grid-item v-for="item in gridview" :index="item.id" :key="item.id">
							<view class="grid-item-box" style="background-color: #fff;text-align: center;">
								<image style="width: 65rpx;height: 65rpx;" :src="item.iconURL"></image>
								<view>{{item.text}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>

				<view class="settingList">
					<u-list height="100%">
						<u-list-item v-for="item in settingList" :key="item.id">
							<view
								style="height: 100%;padding-right: 30rpx; display: flex;justify-content: space-between;align-items: center;">
								<u-cell :title="item.title" />
								<view style="color: #989898;">></view>
							</view>
							<u-line></u-line>
						</u-list-item>
					</u-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				head_portrait: 'https://img2.baidu.com/it/u=3241078855,3050245568&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
				gridview: [{
						id: 1,
						text: '我的收藏',
						iconURL: 'https://cdn7.axureshop.com/demo2024/2310467/images/%E6%88%91%E7%9A%84/u2984.png'
					},
					{
						id: 2,
						text: '我的房源',
						iconURL: 'https://cdn7.axureshop.com/demo2024/2310467/images/%E6%88%91%E7%9A%84/u2987.png'
					},
					{
						id: 3,
						text: '我的求租',
						iconURL: 'https://cdn7.axureshop.com/demo2024/2310467/images/%E6%88%91%E7%9A%84/u2990.png'
					}
				],
				settingList: [{
						id: 1,
						title: '邀请好友'
					},
					{
						id: 2,
						title: '实名认证'
					},
					{
						id: 3,
						title: '实名认证'
					},
					{
						id: 4,
						title: '账号设置'
					},
					{
						id: 5,
						title: '关于我们'
					},
					{
						id: 6,
						title: '我要反馈'
					},
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.MyBox {
		.header_background {
			position: relative;
			width: 100%;
			height: 800rpx;
			background: linear-gradient(to bottom right, #edf3e4 0%, #64b5c8 50%, #a9d9e2 100%);

			.header_lucency {
				position: absolute;
				bottom: 0;
				z-index: 1;
				width: 90%;
				height: 73%;
				padding: 40rpx;
				background: linear-gradient(to bottom, rgba(245, 245, 245, 0)0%, #f5f5f5 100%);
			}
		}

		.container {
			position: relative;
			width: 90%;
			height: 700rpx;
			padding: 40rpx;

			.list_divider {
				position: absolute;
				top: -248rpx;
				z-index: 3;
				width: 90%;
				height: 100%;
				// margin: 30rpx;

				.header_nav {
					width: 90.5%;
					padding: 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
				}

				.settingList {
					width: 100%;
					height: 100%;
					margin-top: 20rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>